<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/pages/common/headAndWelcome.jsp"%><%--静态引用,包括项目起始点,和css,jquery等头部信息 --%>
<title>服务器</title>

<div class="container-fluid " >
    <table class="table table-striped table-bordered table-hover hidden " style="table-layout:inherit">
        <thead>
        <tr >
            <!--<th><input type="checkbox" id="selectall"> 全选</th>-->
            <th class="col-md-1 "><input type="checkbox" id="selectall" onchange="selectall(this)" > 全选</th>
            <th class="col-md-1">编号</th>
            <!--                <th>图标</th>-->
            <th class="col-md-1">名称</th>
            <th class="col-md-1">ip</th>
            <th class="col-md-1">服务 / 容器</th>
            <th class="col-md-1">cpu / memory</th>
            <th class="col-md-1">disk</th>
            <th class="col-md-1">有效期</th>
            <th class="col-md-1 text-center">操作
                <a class="btn btn-default btn-sm glyphicon glyphicon-plus" href="#"></a>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr class="tr">
            <td>
                <input type="checkbox">
                1
            </td>
            <td class="id">1</td>
            <td class="name">济宁</td>
            <td class="ip">1.1.1.1</td>
            <td class="objectChild">
                <form class="bs-example bs-example-form dropdownAndInputForm" role="form">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="input-group ">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        <span class="text">一级</span>
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdownAndInput">
                                        <li>
                                            <a  class="option">nginx</a>
                                        </li>
                                        <li>
                                            <a  class="option">php</a>
                                        </li>
                                        <li>
                                            <a  class="option">mysql</a>
                                        </li>
                                        <li>
                                            <a  class="option">docker</a>
                                        </li>
                                        <li>
                                            <a  class="option">kvm</a>
                                        </li>
                                    </ul>
                                </div><!-- /btn-group -->
                                <div class="changeDiv "  style="width: 150px">
                                    <input  type="text" class="form-control input" >
                                </div><!--/chengrDiv-->
                            </div><!-- /input-group -->
                        </div><!-- /.col-lg-6 -->
                    </div><!-- /.row -->
                </form>
            </td>
            <td class="cpuAndMemory">4c / 4G</td>
            <td class="disk">500G</td>
            <td class="endTime">2020-1-1</td>
            <td class="function">
                <div class="btn-group center-block center-block">
                    <div class="btn btn-default glyphicon glyphicon-pencil edit hand" href="#"></div>
                    <div class="btn btn-default glyphicon glyphicon-ok update hand" href="#"></div>
                    <div class="btn btn-default glyphicon glyphicon-remove delete hand" href="#"></div>
                </div>
            </td>
        </tr>
        </tbody>
    </table><!--废弃的服务器表-->
    <h1 class="text-center">server表</h1>
    <table class="table table-striped table-bordered table-hover " style="table-layout:inherit">
        <thead>
        <tr >
            <!--<th><input type="checkbox" id="selectall"> 全选</th>-->
            <th class="col-md-1 "><input type="checkbox" id="selectall2" onchange="selectall(this)" > 全选</th>
            <th class="col-md-1">编号</th>
            <!--                <th>图标</th>-->
            <th class="col-md-1">名称</th>
            <th class="col-md-1">ip</th>
            <th class="col-md-1">cpu/memory/disk</th>
            <th class="col-md-1">有效期</th>
            <th class="col-md-1 text-center detail">操作
                <div class="btn btn-default btn-sm glyphicon glyphicon-plus create hand" title="添加服务器"></div>
            </th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${requestScope.servers}" var="server"  varStatus="serverStatus">
            <tr class="tr">
                <td>
                    <input type="checkbox">
                    <span class="number">${serverStatus.count}</span>
                </td>
                <td class="id">${server.id}</td>
                <td class="name">
                    ${server.name}
                </td>
                <td class="ip">${server.ip}</td>
                <td class="cpuMemoryDisk">${server.cpu}/${server.memory}/${server.disk}</td>
                <td class="endTime">${server.endTime}</td>
                <td class="detail text-center">
                    <div class="btn-group">
                        <div class="btn btn-default glyphicon glyphicon-pencil edit hand" ></div>
                        <div class="btn btn-default glyphicon glyphicon-ok update hand" ></div>
                        <div class="btn btn-default glyphicon glyphicon-remove delete hand" ></div>
                        <div class="btn btn-default glyphicon glyphicon-globe configService hand" title="添加内部服务"></div>
                    </div>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
    <form class="bs-example bs-example-form dropdownAndInputForm changeTarget hidden" role="form"> <!--这一区域默认是隐藏的,其负责给点击"服务和容器"添加数据-->
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="text">二级</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdownAndInput">
                            <li>
                                <a class="option">nginx</a>
                            </li>
                            <li>
                                <a  class="option">php</a>
                            </li>
                            <li>
                                <a  class="option">mysql</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->
                    <input  type="text" class="form-control input"  style="width: 100px">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form> <!--这一区域默认是隐藏的,其负责给点击"服务和容器"添加数据-->
    <div class="modal fade " id="update" tabindex="-1" role="dialog" aria-labelledby="updateLabel" aria-hidden="true"><!--这一区域是用来为update行为提供模态框的-->
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="updateLabel">提交修改</h4>
                </div>
                <div class="modal-body">是否确认?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitUpdate">提交更改</button>
                </div>
            </div>
        </div>
    </div><!--这一区域是用来为update行为提供模态框的-->
    <div class="modal fade " id="delete" tabindex="-1" role="dialog" aria-labelledby="deleteLabel" aria-hidden="true"><!--这一区域是用来为delete行为提供模态框的-->
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="deleteLabel">提交删除</h4>
                </div>
                <div class="modal-body">是否确认?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitDelete">提交删除</button>
                </div>
            </div>
        </div>
    </div><!--这一区域是用来为delete行为提供模态框的-->
</div>
<p>
    这个页面是用于展示公司有哪些服务器,点击开后,要跳到这台服务器的拓扑页面
</p>
</body>
<script>
    $("table").click(function (event){//detail 操作模块的点击事件,利用冒泡
        let eventTarget=$(event.target);
        if(eventTarget.hasClass('edit')){//此时,已经明确了触发事件的元素是"edit"元素,下一步获取整个tr对象
            let trObj=eventTarget.closest(".tr");//下一步,把tr每一项作为input,等待修改:策略->"td不多,根据class获取td;根据td.innhtml获取text,作为input的value"
            if(trObj.find(".nameEdit").length>0){
                return ;
            }
            trObj.children().each(function (index,element){
                let inputCreate=document.createElement("input");
                inputCreate.className="form-control"
                switch ($(element).attr("class")){
                    //case "id":
                    //    inputCreate.classList.add("idEdit");
                    //    inputCreate.value=element.innerText;
                    //    inputCreate.placeholder="新增时不要添加id";
                    //    $(element).html('').append(inputCreate);
                    //    break;
                    case "name":
                        inputCreate.classList.add("nameEdit");
                        inputCreate.value=element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    case "ip":
                        inputCreate.classList.add("ipEdit");
                        inputCreate.value=element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    case "cpuMemoryDisk":
                        inputCreate.classList.add("cpuMemoryDiskEdit");
                        inputCreate.value=element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    // case "disk":
                    //     inputCreate.classList.add("diskEdit");
                    //     inputCreate.value=element.innerText;
                    //     $(element).html('').append(inputCreate);
                    //     break;
                    case "endTime":
                        inputCreate.classList.add("endTimeEdit");
                        inputCreate.value=element.innerText;
                        $(element).html('').append(inputCreate);
                        break;
                    default:
                    // console.log('default')
                }
            })
        }//此时,已经明确了触发事件的元素是"edit"元素,下一步获取整个tr对象
        if(eventTarget.hasClass('create')){//此时,已经明确了触发事件的元素是"create"元素,下一步获取加一行
            let trObj=$("<tr>")
                trObj.addClass("tr")
                let tdObjCount=$("<td>")
                    let inputCheckBoxObj=$("<input>")
                    inputCheckBoxObj.attr("type","checkbox")
                tdObjCount.append(inputCheckBoxObj)
                    let spanObj=$("<span/>")
                    let lastCount=eventTarget.closest("table").children("tbody").children("tr:last").find(".number:first").html()
                    let count=parseInt(lastCount)+1;
                    spanObj.addClass("number")
                    spanObj.html(count)
                tdObjCount.append(spanObj)
            trObj.append(tdObjCount)
                let tdObjId=$("<td>")
                tdObjId.addClass("id").addClass("createSign")
                    // let inputObjId=$("<input>")
                    // inputObjId.addClass("form-control").addClass("idEdit")
                    // inputObjId.attr("placeholder","新增时不要添加id")
                //tdObjId.append(inputObjId)
                tdObjId.html("id会在创建时自动生成")
            trObj.append(tdObjId)
                let tdObjName=$("<td>")
                tdObjName.addClass("name")
                    let inputObjName=$("<input>")
                    inputObjName.addClass("form-control").addClass("nameEdit")
                    inputObjName.attr("placeholder","如:济宁8")
                tdObjName.append(inputObjName)
            trObj.append(tdObjName)
                let tdObjIp=$("<td>")
                tdObjIp.addClass("ip")
                    let inputObjIp=$("<input>")
                    inputObjIp.addClass("form-control").addClass("ipEdit")
                    inputObjIp.attr("placeholder","如:1.1.1.1")
                tdObjIp.append(inputObjIp)
            trObj.append(tdObjIp)
                let tdObjCpuMemoryDisk=$("<td>")
                tdObjCpuMemoryDisk.addClass("cpuMemoryDisk")
                    let inputObjCpuMemoryDisk=$("<input>")
                    inputObjCpuMemoryDisk.addClass("form-control").addClass("cpuMemoryDiskEdit")
                    inputObjCpuMemoryDisk.attr("placeholder","如:4/4/500")
                tdObjCpuMemoryDisk.append(inputObjCpuMemoryDisk)
            trObj.append(tdObjCpuMemoryDisk)
                let tdObjEndTime=$("<td>")
                tdObjEndTime.addClass("endTime")
                    let inputObjEndTime=$("<input>")
                    inputObjEndTime.addClass("form-control").addClass("endTimeEdit")
                    inputObjEndTime.attr("placeholder","如:2021-04-02")
                tdObjEndTime.append(inputObjEndTime)
            trObj.append(tdObjEndTime)
                let tdObjDetail=$("<td>")
                tdObjDetail.addClass("detail text-center")
                    let divObjBtnGroup=$("<div/>")
                    divObjBtnGroup.addClass("btn-group")
                        let divObjEdit=$("<div/>")
                        divObjEdit.addClass("btn btn-default glyphicon glyphicon-pencil edit hand")
                    divObjBtnGroup.append(divObjEdit)
                        let divObjUpdate=$("<div/>")
                        divObjUpdate.addClass("btn btn-default glyphicon glyphicon-ok update hand")
                    divObjBtnGroup.append(divObjUpdate)
                        let divObjdelete=$("<div/>")
                        divObjdelete.addClass("btn btn-default glyphicon glyphicon-remove delete hand")
                    divObjBtnGroup.append(divObjdelete)
                    let divObjConfigService=$("<div/>")
                        divObjConfigService.addClass("btn btn-default glyphicon glyphicon-globe configService hand")
                        divObjConfigService.attr("title","添加内部服务")
                    divObjBtnGroup.append(divObjConfigService)
                tdObjDetail.append(divObjBtnGroup)
            trObj.append(tdObjDetail)
            eventTarget.closest("table").children("tbody").append(trObj)
        }//此时,已经明确了触发事件的元素是"create"元素,下一步获取加一行
        if(eventTarget.hasClass('update')){//此时,已经明确了触发事件的元素是"create"元素,下一步获取整个tr-json对象
            if(eventTarget.closest("tr").find(".form-control:first").hasClass("nameEdit")){
                $("#update").modal("show")
                $('.yaotijiaodedian').remove('yaotijiaodedian')
                $(eventTarget).addClass("yaotijiaodedian")
            }else{
                confirm("没有修改,不能提交")
            }
        }//此时,已经明确了触发事件的元素是"update"元素,下一步获取整个tr-json对象
        if(eventTarget.hasClass('delete')){//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
            if(eventTarget.closest("tr").find(".form-control:first").hasClass("nameEdit")){
                if(confirm("打开状态下,不允许删除;现在刷新页面")){
                    location.reload();
                }
            }else{
                $("#delete").modal("show")
                $('.yaotijiaodedian').remove('yaotijiaodedian')
                $(eventTarget).addClass("yaotijiaodedian")
            }
        }//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
        if(eventTarget.hasClass('configService')){//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
            if(eventTarget.closest("tr").find(".form-control:first").hasClass("nameEdit")){
                if(eventTarget.closest("tr").find(".id:first").hasClass("createSign")){
                    alert("请先创建服务,再行配置");
                }else{
                    if(confirm("打开状态下,不允许配置服务;现在刷新页面")){
                        location.reload();
                    }
                }
            }else{
                let serverId=eventTarget.closest("tr").find(".id:first").html()
                console.log("<%=basepath%>serviceServlet?action=list&serverId="+serverId)
                window.open("<%=basepath%>serviceServlet?action=list&serverId="+serverId);
                //$("#delete").modal("show")
                //$('.yaotijiaodedian').remove('yaotijiaodedian')
                //$(eventTarget).addClass("yaotijiaodedian")
            }
        }//此时,已经明确了触发事件的元素是"configService"元素,下一步获取整个tr-id
    })//table 的点击事件,利用冒泡
    $("#submitUpdate").click(function () {//这是更新的模态框点击了确定键后搜索数据并提交的过程
        console.log(1)
        let eventTarget=$('.yaotijiaodedian')
        let trObj = {};
        let tdObjId=eventTarget.closest("tr").find(".id:first");
        if(tdObjId.hasClass("createSign")){
            console.log("此为新增,无需id")
        }else{
            let id=eventTarget.closest("tr").find(".id:first").html()
            trObj["id"]=id
        }
        let arr = ["name", "ip", "cpuMemoryDisk", "endTime"];
        eventTarget.closest("tr").find("input").each(function (index, element) { //构建tr-json对象
            //如果有idEdit,就为id赋值
            // if ($(element).hasClass("idEdit")){
            //     trObj["id"]=$(element).val()
            // }
            for (let i in arr) { //不写这个就要把上面的这个if写5次
                if ($(element).hasClass(arr[i] + "Edit")) {
                    if($(element).hasClass("cpuMemoryDiskEdit")){
                        let items=$(element).val().split("/")
                        if(items.length!=3){
                            alert("cpu/memory/disk配置异常")
                            return
                        }
                        trObj["cpu"]=items[0];
                        trObj["memory"]=items[1];
                        trObj["disk"]=items[2];
                    }else{
                        trObj[arr[i]] = $(element).val()
                    }
                }
            }//不写这个就要把上面的这个if写5次
        })//构建tr-json对象
        console.log(trObj)
        if(trObj.name==""){
            alert("请给服务器命名")
            return
        }
        if(trObj.ip==""){
            alert("请给服务器分配ip")
            return
        }
        if(trObj.cpu==""){
            alert("请标明cpu数量")
            return
        }
        if(trObj.memory==""){
            alert("请确定内存大小")
            return
        }
        if(trObj.disk==""){
            alert("请标明磁盘大小")
            return
        }
        if(trObj.endTime==""){
            alert("任何事物必须有生命周期")
            return
        }
        //return
        $.ajax({
            type: "post",
            url: "<%=basepath%>serverServlet?action=ajaxCreateServer",
            data: trObj,
            success: function (response, status, xhr) {
                console.log("收到回信")
                console.log(response)
                if(response=="存入成功"){
                    //console.log("存入成功")
                    location.href="<%=basepath+"serverServlet?action=list"%>";
                }else {
                    alert("存入失败");
                }
            },
            timeout: 10000, //如果超时1000毫秒，就结束
            error: function (xhr, errorText, errorType) { //错误后的行为
                console.log("回信异常")
                console.log("errorText:" + errorText); //error
                console.log("errorType:" + errorType); //not found
                console.log("xhr.status:" + xhr.status); //404
                console.log("xhr.statusText:" + xhr.statusText); //not found
            },
            dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
        })//ajax
    })//的模态框点击了确定键后搜索数据并提交的过程

    $("#submitDelete").click(function () {//这是更新的模态框点击了确定键后搜索数据并提交的过程
        let eventTarget=$('.yaotijiaodedian')
        let trObj=eventTarget.closest(".tr");
        $.ajax({
            type:"post",
            url:"<%=basepath%>serverServlet?action=ajaxDeleteServer",
            data:{"id":trObj.children(".id:first").html()},
            success:function (response,status,xhr) {
                console.log("收到回信")
                console.log(response)
                if(response=="删除成功"){
                    location.href="<%=basepath+"serverServlet?action=list"%>";
                }else {
                    alert("删除失败");
                }
            },
            timeout:10000, //如果超时1000毫秒，就结束
            error:function (xhr,errorText,errorType) { //错误后的行为
                console.log("回信异常")
                console.log("errorText:"+errorText); //error
                console.log("errorType:"+errorType); //not found
                console.log("xhr.status:"+xhr.status); //404
                console.log("xhr.statusText:"+xhr.statusText); //not found
            },
            dataType:"text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
        })//ajax
    })//这是更新的模态框点击了确定键后搜索数据并提交的过程
    $('.objectChild').click(function (event){
        if($(event.target).hasClass("option")){//这是确定了点击的是ul-li-a
            let htmlText=$(event.target).html();
            if(htmlText=="docker"||htmlText=="kvm"){
                let changeTargetObj=$(".changeTarget")//数据源
                changeTargetObj.find('.text').html(htmlText)//替换数据源中显示的标题为docker或kvm
                $(".changeDiv").html(changeTargetObj.html())//把数据源赋值给目标区域
            }else{//如果这个a标签的内容不是docker或kvm,就可以把a的内容赋值给input
                $(event.target).closest('.dropdownAndInputForm').find('.input').val(htmlText)

                let virtualType=$(event.target).closest('.input-group-btn').find('.text').html()
                $(event.target).closest('.dropdownAndInputForm').find('.input').attr("virtualType",virtualType)
            }
        }else{
        }
    })
</script><!--表格点击事件-->
</html>